<template>
	<div>
		<!--<ul @click="handleClick">
			<li @click.stop="handleClick" v-for="(item,index) in list" :key="`list_item_${index}`">{{item.name}}</li>
		</ul>-->
		<!--<List :list="list" :style="{color: 'red'}" :render="renderFunc"></List>-->

		<List :list="list" :style="{color: 'red'}">
			<count-to slot-scope="count" :end-val="count.number"></count-to>
		</List>
	</div>
</template>

<script>
	import List from "_c/list";
	import CountTo from '_c/count-to';

	export default {
		name: "Render-page",
		data() {
			return {
				/*list: [
					{name: 'Jerry'},
					{name: 'Tom'}
				]*/
				list: [{number: 100}, {number: 45}]
			};
		},
		components: {List,CountTo},
		methods: {
			/*handleClick(event) {
				console.log(event);
			},*/

			/**
			 * 函数式组件
			 */
			/*renderFunc(h, name) {
				return h('i', {
					style: {
						color: 'pink'
					}
				}, name);
			}*/

			/**
			 * jsx写法
			 */
			renderFunc(h, number) {
				// return (< CountTo on-click = {this.handleClick} on-on-animation-end={this.handleEnd} endVal={number} style = {{color:'pink'}}></CountTo>);
				return (< CountTo nativeOn-click = {this.handleClick} on-on-animation-end={this.handleEnd} endVal={number} style = {{color:'pink'}}></CountTo>);
			},
			handleClick(event) {
				// console.log(event);
			},
			handleEnd() {
				// console.log('end');
			}
		}
	}
</script>
